.kaitify-video-upload {
  display: block;
  width: 100%;

  .kaitify-video-upload-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    font-size: 30px;
    position: relative;
    opacity: 0.7;
    transition: all 300ms;

    input[type='file'] {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    &:hover {
      opacity: 1;

      input[type='file'] {
        cursor: pointer;
      }
    }
  }

  .kaitify-video-upload-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: @padding;
  }
}

.kaitify-video-remote {
  display: block;
  width: 100%;
  padding: @small-padding @padding;

  input[type='url'] {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid @border-color;
    font-size: @font-size;
    font-family: @font-family;
    line-height: @line-height;
    color: @font-color;
    background: transparent;
    padding: @small-padding 0;
    margin-bottom: @margin;
    transition: all 300ms;

    &:focus {
      border-bottom-color: @theme;
    }

    &::placeholder,
    &::-webkit-input-placeholder {
      opacity: 0.5;
      font-family: @font-family;
      color: inherit;
    }
  }

  .kaitify-video-remote-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  &.kaitify-dark {
    input[type='url'] {
      border-bottom-color: @border-color-dark;
      color: @font-color-dark;

      &:focus {
        border-bottom-color: @theme;
      }
    }
  }
}
